<template>
  <div class="chart-line" ref="chart"></div>
</template>

<script>
export default {
  name: "EchartLine",
  data() {
    return {};
  },
  props: {
    msg: {
      type: Object,
      default() {
        return {
          title: '标题',
          data: [1, 2, 3, 4, 5, 6, 7]
        }
      },
      request: true
    }
  },
  mounted() {
    this.myChart();
  },
  methods: {
    myChart() {
      var chartDom = this.$refs.chart;
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
        },
        yAxis: {
          type: "value",
        },
        title: {
          text: this.msg.title,
          show: true, //是否显示组件标题 true显示，false隐藏
          link: "/", //主标题文本超链接
          target: "blank", //指定窗口打开标题链接  self是当前窗口打开，blank是新窗口打开
          x: "center", //标题居中
          textStyle: {
            color: "#002766", //主标题颜色
            fontStyle: "normal", //主标题字体风格 italic、oblique斜体  normal 正常
            fontWeight: "normal", //主标题文字字体粗细 normal 正常 bold 加粗
            fontFamily: "Microsoft YaHei", //主标题文字的字体系列 serif、monospace、Arial、Courier New、 Microsoft YaHei
            fontSize: 16, //主标题文字的字体大小
            align: "left", //文字水平对齐方式 默认自动
            verticalAlign: "top", //文字垂直对齐方式 默认自动
            lineHeight: 56, //行高 rich中如果没有设置lineHeight,则会取父层级的lineHeight
            textBorderColor: "transparent", //文字本身的描边颜色 transparent（透明的）
            textBorderWidth: 1, //文字本身的描边宽度
            textShadowColor: "transparent", //文字本身的阴影颜色 transparent（透明的）
            textShadowBlur: 1, //文字本身的阴影长度
            textShadowOffsetX: 0, //文字本身的阴影X偏移
            textShadowOffsetY: 0, //文字本身的阴影Y偏移
          },
          subtext: "2021/04/10-2021/04/11",
          sublink: "/", //副标题的文本超链接
          subtextStyle: {
            color: "#002766", //副标题文字的颜色
            fontStyle: "normal", //副标题文字字体的风格
            fontWeight: "normal", //副标题文字字体的粗细
          },
          triggerEvent: "false", //是否触发事件
          padding: 0, //标题内边距 单位为PX，默认各方向内边距为5 上右下左
          itemGap: 10, //主副标题之间的间距
          right: 20, //grid 组件离容器右侧的距离
        },
        toolbox: {
          show: true,
          feature: {
            //各工具配置项
            saveAsImage: {},
            // dataView: {
            //   //数据视图
            //   readOnly: false,
            // },
            restore: {},
            magicType: {
              //动态类型切换
              type: ["line", "bar"],
            },
          },
        },
        series: [
          {
            data: this.msg.data,
            type: "line",
            smooth: true
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.chart-line {
  float: left;
  width: 500px;
  height: 300px;
  margin-right: 50px;
}
</style>
